<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <el-row class="header navbar bg-white shadow">
        <!--时间日期-->
        <div class="btn-group tool-button mt5">
            <el-date-picker
                    v-model="searchDate"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    size="medium"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
        </div>
        <!--按赛事类型搜索-->
        <div class="btn-group tool-button mt5">
            <el-select v-model="pageForm.matchType" placeholder="请选择赛事类型"
                       size="medium"
            >
                <el-option
                        v-for="item in matchTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <!--按赛事阶段搜索-->
        <div class="btn-group tool-button mt5">
            <el-select v-model="pageForm.stage" placeholder="请选择赛事阶段"
                       size="medium"
            >
                <el-option
                        v-for="item in matchStageOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <!--按联赛或主、客队搜索-->
        <div class="btn-group tool-button mt5">
            <el-input v-model="pageForm.searchKeyword" @keyup.enter.native="doSearch"
                      placeholder="联赛、主队名、客队名、mid" size="medium"></el-input>
        </div>
        <!--搜索按钮-->
        <div class="btn-group tool-button mt5">
            <el-button slot="append" icon="el-icon-search" @click="doSearch" size="medium"></el-button>
        </div>
        <!--爬取指定日期赛果-->
        <div class="pull-right offscreen-right mt5">
            <el-button size="medium" @click="crawlMatchResult" title="(重新)获取指定时间区间内的赛果">获取赛果</el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table
                :data="tableData"
                size="small"
                header-align="center"
                style="width: 100%"

        >
            <el-table-column
                    prop="mid"
                    label="皇冠赛事id"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="league"
                    label="所属联赛"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="主队"
                    prop="mbTeam"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="tgTeam"
                    label="客队"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="type"
                    label="比赛类型"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.type=='BASKETBALL'">篮球</span>
                    <span v-else>足球</span>
                </template>
            </el-table-column>
            <el-table-column
                    sortable
                    label="阶段"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.stage==null">待补充</span>
                    <span v-else-if="scope.row.stage=='future'">早盘</span>
                    <span v-else-if="scope.row.stage=='browse'">今日</span>
                    <span v-else-if="scope.row.stage=='running'">滚球中</span>
                    <span v-else-if="scope.row.stage=='finished'">已结束</span>
                    <span v-else-if="scope.row.stage=='other'">其他</span>
                </template>
            </el-table-column>
            <el-table-column
                    sortable
                    prop="dateTime"
                    label="时间(美东)"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="mbInBall"
                    label="主队全场进球"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="mbInBallHf"
                    label="主队半场进球"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="tgInBall"
                    label="客队全场进球"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="tgInBallHf"
                    label="客队半场进球"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120"
                    align="center">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini">
                            <i class="ti-settings"></i>
                            <span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided
                                              :command="{type:'edit',id:scope.row.id, matchType: scope.row.type}">
                                {{scope.row.version != null ? '查看' : '修改'}}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--分页容器-->
    <el-row class="el-pagination-container">
        <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageNumberChange"
                :current-page="pageForm.pageNumber"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.totalCount">
        </el-pagination>
    </el-row>
    <!--新增/修改按钮弹出的dialog-->
    <el-dialog
            title="赛果详情"
            :visible.sync="editDialogVisible"
            :close-on-click-modal="false"
            @close="resetEdit"
            width="50%">

        <div style="line-height: 40px; margin-bottom: 10px">
            <div>{{formData.mbTeam}} VS {{formData.tgTeam}}</div>
            <div>{{formData.dateTime}}</div>
            阶段：
            <el-select v-model="formData.stage" placeholder="阶段" size="medium" @change="changeTableStage"
                       :disabled="!editAble || matchStageSnapShot == 'other'">
                <el-option v-for="(item,index) in stageArr"
                           :key="item.key"
                           :label="item.label"
                           :value="item.value"
                           :disabled="index < thisIndex"
                ></el-option>
            </el-select>

            <!-- 是否腰斩 勾选-->
            <el-checkbox v-model="formData.isCut"
                         v-if="editAble && formData.stage == 'finished'"
                         border
                         size="medium"
                         label="是否腰斩" @change="isCutParentSet(formData.isCut)">
            </el-checkbox>
            <!--强制解锁按钮-->
            <span class="pull-right">
                <el-tooltip content="解锁修改赛果" placement="top" effect="light">
                    <el-button @click="unlock()" :disabled="editAble" size="medium" type="warning"
                               icon="el-icon-lock"></el-button>
                </el-tooltip>
            </span>
            <!--查看版本-->
            <span class="pull-right">
                <span>查看版本</span>
                <el-select v-model="version" placeholder="版本号" size="medium" style="width:35%" @change="changeVersion">
                    <el-option
                            v-for="item in versionObj"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            size="mini"
                    >
                    </el-option>
                </el-select>
            </span>
        </div>

        <el-table
                ref="multipleTable"
                :data="tableData3"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    :selectable="() => editAble"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="阶段">
            </el-table-column>
            <el-table-column
                    prop="resultH"
                    :label='formData.mbTeam'>
                <template slot-scope="scope">
                    <template v-if="editAble">
                        <el-input v-if="formData.stage == 'other'" v-model="scope.row.resultH" size="small"
                                  placeholder="请输入内容"></el-input>
                        <el-input v-else-if="scope.row.waistData" v-model="scope.row.resultH" size="small"
                                  placeholder="请输入内容"></el-input>
                        <el-input-number v-else v-model="scope.row.resultH" size="small"
                                         :min="0" :max="200" label="分数"></el-input-number>
                    </template>
                    <span v-else>{{scope.row.resultH}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="resultC"
                    :label='formData.tgTeam'>
                <template slot-scope="scope">
                    <template v-if="editAble">
                        <el-input v-if="formData.stage == 'other'" v-model="scope.row.resultC" size="small"
                                  placeholder="请输入内容"></el-input>
                        <el-input v-else-if="scope.row.waistData" v-model="scope.row.resultC" size="small"
                                  placeholder="请输入内容"></el-input>
                        <el-input-number v-else v-model="scope.row.resultC" size="small"
                                         :min="0" :max="200" label="分数"></el-input-number>
                    </template>
                    <span v-else>{{scope.row.resultC}}</span>
                </template>
            </el-table-column>

            <el-table-column
                  label='是否腰斩'
                  width="150"
                  v-if="editAble && formData.stage == 'finished' && formData.isCut">
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.waistData"
                                 size="medium"
                                 label="是否腰斩" @change="isCutChildSet(scope.row)">
                    </el-checkbox>
                </template>
            </el-table-column>
        </el-table>
        <!--        确认/取消 提交修改按钮-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false" v-show="editAble">取 消</el-button>
            <el-button type="primary" @click="doEdit" v-show="editAble">确 定</el-button>
            <el-button type="primary" v-show="!editAble" @click="editDialogVisible = false">关闭</el-button>
        </span>
    </el-dialog>

</div>
<script src="${base!}/assets/platform/js/sha256.js"></script>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var self = this;
            return {
                thisIndex: 0,
                stageArr: [
                    {
                        label: '早盘',
                        key: 'future',
                        value: 'future'
                    },
                    {
                        label: '今日',
                        key: 'browse',
                        value: 'browse'
                    },
                    {
                        label: '滚球中',
                        key: 'running',
                        value: 'running'
                    },
                    {
                        label: '已结束',
                        key: 'finished',
                        value: 'finished'
                    },
                    {
                        label: '其他',
                        key: 'other',
                        value: 'other'
                    }],
                matchTypeOptions: [{
                    value: '',
                    label: '全部类型'
                }, {
                    value: 'FOOTBALL',
                    label: '足球'
                }, {
                    value: 'BASKETBALL',
                    label: '篮球'
                }],
                matchStageOptions: [{
                    value: '',
                    label: '全部阶段'
                }, {
                    value: 'running',
                    label: '滚球中'
                }, {
                    value: 'future',
                    label: '早盘'
                }, {
                    value: 'browse',
                    label: '今日'
                }, {
                    value: 'finished',
                    label: '已结束'
                }, {
                    value: 'other',
                    label: '其他'
                }],
                pickerOptions: {
                    disabledDate: function (time) {
                        var threeMonths = moment().add(-3, 'months').valueOf();
                        return time.getTime() > new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
                            || time.getTime() < threeMonths;
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'weeks').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-3, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                searchDate: [],
                addDialogVisible: false,
                editDialogVisible: false,
                titlePopu: 0,
                tableData: [],
                pageForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                    searchDate: "",
                    matchType: "",
                    stage: "",
                },
                formData: {
                    stage: "future"
                },
                matchStageSnapShot: '',// 记录赛事最初的状态
                version: 0,
                versionObj: [], //所有版本
                editAble: false, //查看或者修改解锁
                tableDataLook: null,
                tableData3: [], // 展示修改的表格数据
                basketball: [
                    {
                        "remark": "第一节",
                        resultH: '',
                        resultC: '',
                        tag: 'NO1',
                    }, {
                        "remark": "第二节",
                        resultH: '',
                        resultC: '',
                        tag: 'NO2'
                    }, {
                        "remark": "第三节",
                        resultH: '',
                        resultC: '',
                        tag: 'NO3'
                    }, {
                        "remark": "第四节",
                        resultH: '',
                        resultC: '',
                        tag: 'NO4'
                    }, {
                        "remark": "上半场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO5'
                    }, {
                        "remark": "下半场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO6'
                    }, {
                        "remark": "加时",
                        resultH: '',
                        resultC: '',
                        tag: 'NO7'
                    }, {
                        "remark": "全场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO8'
                    }], // 篮球各阶段
                football: [
                    {
                        "remark": "上半场开场 - 14:59 分钟",
                        resultH: '',
                        resultC: '',
                        tag: 'NO1',
                    }, {
                        "remark": "15:00 – 29:59 分钟",
                        resultH: '',
                        resultC: '',
                        tag: 'NO2'
                    }, {
                        "remark": "30:00分钟 - 半场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO3'
                    }, {
                        "remark": "半场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO4'
                    }, {
                        "remark": "下半场开场 - 59:59 分钟",
                        resultH: '',
                        resultC: '',
                        tag: 'NO5'
                    }, {
                        "remark": "60:00 – 74:59 分钟",
                        resultH: '',
                        resultC: '',
                        tag: 'NO6'
                    }, {
                        "remark": "75:00分钟 - 全场完场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO7'
                    }, {
                        "remark": "全场",
                        resultH: '',
                        resultC: '',
                        tag: 'NO8'
                    }], // 足球各阶段
                multipleSelection: [], // 勾选的数据
            }
        },
        methods: {
            isCutChildSet(res){
                if(res.waistData){
                    res.resultH = '赛事腰斩';
                    res.resultC = '赛事腰斩';
                }else {
                    res.resultH = 0;
                    res.resultC = 0;
                }
            },
            isCutParentSet(status){
                //如果是腰斩则增加一个参数
                if(status){
                    this.tableData3 = this.tableData3.map(item=>{
                        item.resultH = '赛事腰斩';
                        item.resultC = '赛事腰斩';
                        item.waistData = true; //腰斩数据
                        return item;
                    });
                }else {
                    //查看
                    if(this.formData.version != null){
                        this.upDateData3();
                    }else {
                        this.tableData3 = this.tableData3.map(item=>{
                            item.resultH = 0;
                            item.resultC = 0;
                            delete (item.waistData); //腰斩数据
                            return item;
                        });
                    }
                }
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                if (self.searchDate) {
                    self.pageForm.searchDate = self.searchDate.toString();
                } else {
                    self.pageForm.searchDate = "";
                }
                self.pageForm.start = self.pageForm.searchDate.split(',')[0];
                self.pageForm.end = self.pageForm.searchDate.split(',')[1];
                $.post(base + "/platform/crown/match/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            // 爬取赛果按钮
            crawlMatchResult: function () {
                var self = this;
                sublime.showLoadingbar();//显示loading
                if (self.searchDate.length === 0) {
                    self.$message({
                        message: "请选择要爬取的日期",
                        type: 'error'
                    });
                    return;
                }
                self.pageForm.searchDate = self.searchDate.toString();
                $.post(base + "/platform/crown/match/crawlMatchResult", self.pageForm, function (data) {
                    if (data.code === 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doEdit: function () { // 提交新增/修改
                var self = this;
                if (0 === self.multipleSelection.length) {
                    self.$message({
                        message: "请勾选数据再提交",
                        type: 'error'
                    });
                    return;
                }
                let tag = 3;
                // 只要勾选了‘半场’以及‘半场’以后的赛事，就要把isHalfGone设置为true
                for (let i = 0; i < self.multipleSelection.length; i++) {
                    tag = self.formData.type === "FOOTBALL" ? 4 : tag;
                    if (parseInt(self.multipleSelection[i].tag.split("NO")[1]) >= tag) {
                        self.formData.isHalfGone = true;
                        break;
                    }
                }
                self.formData.subResults = self.multipleSelection;
                $.ajax({
                    url: base + "/platform/crown/match/editDo",
                    type: "POST",
                    data: JSON.stringify(self.formData),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        if (data.code == 0) {
                            self.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            self.doSearch();
                            self.editDialogVisible = false;
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }
                });

                /*$.post(base + "/platform/crown/match/editDo", self.formData, function (data) {
                    if (data.code == 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        self.doSearch();
                        self.editDialogVisible = false;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");*/
            },
            dropdownCommand: function (command) {//监听下拉框事件
                var self = this;
                // 修改按钮
                if ("edit" == command.type) {
                    let params = command.id;
                    if (command.remark && command.remark === 'changeVersion') {
                        params += '&oldVersion=' + command.oldVersion;
                    }
                    $.post(base + "/platform/crown/match/edit?id=" + params, {}, function (data) {
                        if (data.code == 0) {
                            if (self.$refs["editForm"]) {// 清空校验提示
                                self.$refs["editForm"].resetFields();
                            }
                            // 记录赛事stage快照
                            self.matchStageSnapShot = data.data.stage;
                            // 赛事已有赛果时，展示赛果。操作按钮显示‘查看’
                            if (data.data.version != null) {
                                self.tableData3 = data.data.subResults;
                                self.tableDataLook = JSON.parse(JSON.stringify(data.data.subResults));
                            }
                            // 赛事没有赛果时，操作按钮显示‘修改’
                            else {
                                let matchArr = self.basketball;
                                if (command.matchType === 'FOOTBALL') {
                                    matchArr = self.football;
                                }
                                matchArr.forEach(item => {
                                    item.matchId = data.data.id;
                                });
                                self.tableData3 = JSON.parse(JSON.stringify(matchArr));
                            }

                            self.formData = data.data;// 加载后台表单数据
                            if (!command.remark) {
                                self.version = data.data.version;
                            }
                            self.versionObj = [];
                            for (let i = 0; i < data.data.version + 1; i++) {
                                let obj = {
                                    id: i,
                                    name: i
                                };
                                self.versionObj.push(obj);
                            }
                            self.editDialogVisible = true;// 打开编辑窗口
                            self.titlePopu = 1;
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                let self = this;
                val.forEach(item => {
                    if ("NO8" === item.tag && self.isNumber(item.resultH)) {
                        self.formData.stage = 'finished';
                    }
                });
                this.multipleSelection = val;
            },
            isNumber(value) {
                return typeof value === 'number' && !isNaN(value);
            },
            changeTableStage(e) {
                if (e === 'other') {
                    this.tableData3.forEach(val => {
                        val.resultC = '';
                        val.resultH = ''
                    });
                } else if (e !== 'finished') {
                    this.formData.isCut = false;
                    this.isCutParentSet(false);
                } else {
                    this.upDateData3();
                }
                this.formData.stage = e;
                this.$refs.multipleTable.clearSelection();
            },
            resetEdit() {
                this.editAble = false;
            },
            changeVersion: function () {
                let command = {};
                command.type = 'edit';
                command.remark = 'changeVersion';
                command.id = this.formData.id;
                command.oldVersion = this.version;
                this.dropdownCommand(command);
            },
            // 解锁按钮
            unlock() {
                let self = this;
                console.log("table2==", self.tableData3);
                this.$confirm('修改赛果将导致相关注单重新结算, 是否继续?', '警告！！！', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    self.editAble = true;
                    // 显示所有阶段
                    self.upDateData3();
                    console.log("table3==", self.tableData3);
                    // 记录stage的index
                    for (let i = 0; i < self.stageArr.length; i++) {
                        if (self.stageArr[i].key === self.formData.stage) {
                            self.thisIndex = i;
                            break;
                        }
                    }
                }).catch(() => {
                });
            },
            upDateData3() {
                let self = this;
                if(!self.tableDataLook){
                    return false;
                }
                let oldArr = JSON.parse(JSON.stringify(self.basketball));
                if (self.formData.type === 'FOOTBALL') {
                    oldArr = JSON.parse(JSON.stringify(self.football));
                }
                self.tableDataLook.forEach(item => {
                    for (let i = 0; i < oldArr.length; i++) {
                        if (item.tag === oldArr[i].tag) {
                            oldArr[i] = item;
                            break;
                        }
                    }
                });
                self.tableData3 = JSON.parse(JSON.stringify(oldArr));
            }
        },
        created: function () {
            this.pageData();
        }
    });
</script>

<!--#
}
#-->